<template>
    <div class="answerMain">
        <div class="answerTit">2022年11月10日诚赉健康问答排行榜</div>
        <div class="answerTip">
            <img src="../assets/X2/answer/answerTit.png" alt="答题活动">
        </div>
        <!-- 答题数据 -->
        <el-table :data="answerData" style="width: 100%" height="660" :header-cell-style="{
            height: '32px', color: '#333', textAlign: 'center', fontWeight: '400', fontSize: '16px',
        }" :cell-style="{ textAlign: 'center', color: '#333', fontSize: '14px', height: '32px' }">
            <el-table-column type="index" label="排行榜" width="100">
            </el-table-column>
            <el-table-column label="参与信息">
                <template slot-scope="scope">
                    <div class="userInfo">
                        <img class="userPhoto" src="../assets/advisory_img1.png" alt=""> {{ scope.row.name }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="zhun" label="准确率">
            </el-table-column>
            <el-table-column prop="times" label="用时">
            </el-table-column>
            <el-table-column label="标识">
                <template slot-scope="scope">
                    <img class="jiangImg" v-if="scope.$index == 0" src="../assets/X2/answer/one.png" alt="第一名">
                    <img class="jiangImg" v-else-if="scope.$index == 1" src="../assets/X2/answer/two.png" alt="第二名">
                    <img class="jiangImg" v-else-if="scope.$index == 2" src="../assets/X2/answer/three.png" alt="第三名">
                    <span v-else></span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    name: 'answer',
    data() {
        return {
            answerData: [],
        }
    },
    created() {
        for (var i = 0; i < 20; i++) {
            this.answerData.push({
                name: `Yakamoz${i}`,
                zhun: `${60 + i}%`,
                times: '21min15s',
            })
        }
    },
    methods: {

    }
}
</script>

<style lang="less" scoped>
.answerMain {
    padding: 20px 90px 32px 100px;

    ::-webkit-scrollbar {
        display: none;
    }

    .answerTit {
        width: 100%;
        text-align: center;
        font-size: 24px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #0B1532;
        cursor: pointer;
    }

    .answerTip {
        width: 100%;
        margin-top: 34px;
        padding-bottom: 30px;

        img {
            width: 80px;
            height: 20px;
        }

        cursor: pointer;
        border-bottom: 1px solid #f2f2f2;
    }

    .userInfo {
        display: flex;
        justify-content: center;
        align-items: center;

        .userPhoto {
            margin-right: 18px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
        }
    }
}

.jiangImg {
    width: 50px;
    height: 47px;
}
</style>